<template>
    <view class="play" :class="mode">
        <view class="item" v-for="(item, index) in 6" @tap="select(item, index)">
            <!-- 首页 -->
            <block v-if="mode == 'home'">
                <view class="addname" v-if="showAddname">西安</view>
                
                <!-- 主题 -->
                <view class="downbox" v-if="theme">
                    <text>限时秒杀  倒计时</text>
                    <u-count-down bg-color="rgba(0,0,0,0)" separator-size="24" font-size="24" color="#fff" separator-color="#fff" :timestamp="86400"></u-count-down>
                </view>
                
                
                <view class="cover">
                    <u-image src="/static/ad/st2.png" border-radius="10" width="100%" height="350"></u-image>
                    <view class="labelbox">
                       <view class="label-item">
                            <u-tag text="曼谷丹嫩沙多水上" shape="circle" bg-color="rgba(0,0,0,.3)" color="#fff" mode="dark"/>
                        </view>
                        <view class="label-item">
                            <u-tag text="曼谷丹" shape="circle" bg-color="rgba(0,0,0,.3)" color="#fff" mode="dark"/>
                        </view>
                        <view class="label-item">
                            <u-tag text="曼谷丹嫩沙" shape="circle" bg-color="rgba(0,0,0,.3)" color="#fff" mode="dark"/>
                        </view>
                        <view class="label-item">
                            <u-tag text="曼谷丹嫩沙" shape="circle" bg-color="rgba(0,0,0,.3)" color="#fff" mode="dark"/>
                        </view>
                        <view class="label-item">
                            <u-tag text="曼谷丹嫩沙多水上" shape="circle" bg-color="rgba(0,0,0,.3)" color="#fff" mode="dark"/>
                        </view>
                        <view class="label-item">
                            <u-tag text="..." shape="circle" bg-color="rgba(0,0,0,.3)" color="#fff" mode="dark"/>
                        </view>
                    </view>
                </view>
                <view class="info flex" :class="{
                    theme:theme,
                }">
                    <view class="title">泰国曼谷丹嫩沙多3日游</view>
                    <view class="des">
                        <text class="price">￥<text>11700</text></text>起
                    </view>
                </view>
                <view v-if="theme" class="theme-des">
                    <text>#户外游</text>
                    <text>#户外游</text>
                </view>
            </block>
            <!-- 搜索页面 -->
            <block v-if="mode == 'search'">
                <view class="title">
                    <view class="tit txt-hide">泰国曼谷丹嫩沙多3日游</view>
                    <view class="prices">
                        <text class="price">￥<text>148</text></text>起
                    </view>
                </view>
                <rates />
                <view class="text txt-hide2">简介：介绍的大多数方法是模仿格斗技中的技巧,比如提膝攻击或者膝肘防御术。...</view>
                <view class="imgs">
                    <view class="imgs-item">
                        <u-image src="/static/ad/st10.png" border-radius="10" width="190" height="180"></u-image>
                    </view>
                    <view class="imgs-item">
                        <u-image src="/static/ad/st11.png" border-radius="10" width="190" height="180"></u-image>
                    </view>
                    <view class="imgs-item">
                        <u-image src="/static/ad/st12.png" border-radius="10" width="190" height="180"></u-image>
                    </view>
                </view>
                <view class="des">
                    <view class="des-item add">
                        <image src="/static/icon_add2.png" mode="widthFix" class="icon"></image>
                        <text>珠海横琴新</text>
                    </view>
                    <view class="des-item">187m</view>
                </view>
            </block>
            
            <!-- 列表 -->
            <block v-if="mode == 'list'">
            <u-image src="/static/ad/st13.png" width="160" borderRadius="10" height="160"></u-image>
            <view class="info">
                <view class="tit txt-hide">速马赫卡丁车</view>
                <view class="rates">
                     <rates :bgcolor="false" padding="0" :showSales="false" size="24"/>
                     <text>45m</text>
                </view>
                <view class="des">
                    <view class="des-item">
                        <image src="/static/icon_coupon.png" mode="widthFix" class="icon"></image>
                        <text>￥102</text>
                    </view>
                    <view class="des-item">
                        <text>双人200cc卡丁车畅玩套餐</text>
                    </view>
                </view>
                <view class="labelbox">
                    <!-- fcece3 -->
                    <!-- def8fa -->
                    <view class="label-item">
                        <u-tag text="#世界顶级主题公园" bg-color="#fcece3" color="#ff5b00" shape="circle" mode="dark"  />
                    </view>
                    <view class="label-item">
                         <u-tag text="#乐园" shape="circle" bg-color="#def8fa" color="#07b1b6" mode="dark"/>
                    </view>
                </view>
            </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    components:{
    },
    data() {
        return {
        };
    },
    props: {
        /**
         * home 首页
         * search 搜索结果页
         * */
        mode: {
            type: String,
            default: 'home'
        },
        list: {
            type: Array,
            default(){
                return []
            }
        },
        showAddname:{
            type: Boolean,
            default: false,
        },
        theme:{
            type: Boolean,
            default: false,
        },
    },
    methods: {
        select(item, index) {
            this.$emit('playerSelect', { item, index });
        },
    },
};

</script>

<style scoped lang="scss">
.play{
    padding: 0 30rpx;
    .item{
        position: relative;
        .addname{
            position: absolute;
            left: 0;
            top: 0;
            background: $color-yel;
            // f35241
            border-radius: 50px 50px 50px 0;
            color: $uni-bg-color;
            font-size: 13px;
            padding: 0 30rpx;
            height: 56rpx;
            line-height: 56rpx;
            z-index: 9;
            transform: translate(0,-8px);
        }
        .downbox{
            position: absolute;
            left: 0;
            top: 0;
             z-index: 9;
             background-image: linear-gradient(to right ,#fd6551,#f35242);
             border-radius: 4px 0 10px 0;
             color: $uni-bg-color;
             font-size: 13px;
             padding: 0 30rpx;
             height: 56rpx;
             line-height: 56rpx;
        }
    }
    &.home{
        .item{
            margin-bottom: 20rpx;
            &:nth-last-child(1){
                margin: 0;
            }
        }
        .cover{
            position: relative;
            overflow: hidden;
        }
        .info{
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            line-height: 80rpx;
            .title{
                width: 65%;
                font-size: 16px;
            }
            &.theme{
                padding: 0 30rpx;
            }
        }
        
        .theme-des{
            padding: 0 30rpx 6px;
            text{
                color: #999;
                margin-right: 8px;
                font-size: 13px;
            }
        }
        
        
        
        .des{
            font-size: 12px;
            color: $uni-color-text;
            .price{
                color: $color-red;
                text{
                    font-size: 16px;
                }
            }
        }
        .labelbox{
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 20rpx 20rpx 10rpx;
            font-size: 10px;
            display: flex;
            flex-wrap: wrap;
            width: 70%;
            .label-item{
                margin-right: 5px;
                margin-bottom: 10rpx;
            }
        }
    }
    &.search{
        .item{
            background: $uni-bg-color;
            padding: 20rpx 30rpx;
            border-radius: 10px;
            margin-bottom: 20rpx;
          &:nth-last-child(1){
              margin: 0;
          }
        }
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0 10px;
            .tit{
                width: 65%;
                height: 24px;
                line-height: 24px;
                font-size: 18px;
                font-weight: bold;
            }
            .prices{
                font-size: 13px;
            }
            .price{
                color: $color-red;
                text{
                    font-size: 16px;
                }
            }
        }
       .text{
           height: 88rpx;
           line-height: 44rpx;
           font-size: 13px;
           margin: 16rpx 0;
       }
       .imgs{
           display: flex;
           margin-right: -20rpx;
           .imgs-item{
               margin-right: 20rpx;
               margin-bottom: 20rpx;
           }
       }
       .des{
           display: flex;
           padding: 12rpx 0 20rpx;
           justify-content: space-between;
             font-size: 0;
       }
       .des-item{
           font-size: 12px;
           line-height: 16px;
            color: $uni-color-subtitle;
            display: inline-block;
            vertical-align: middle;
           .icon{
               width: 16px;
               height: 16px;
               vertical-align: middle;
           }
           text{
               vertical-align: middle;
           }
           &.add{
               color: $color-blue;
           }
       }
    }
    &.list{
        .item{
            display: flex;
            justify-content: space-between;
            background: $uni-bg-color;
            margin-bottom: 20rpx;
            border-radius: 6px;
            padding: 30rpx 20rpx;
            &:nth-last-child(1){
                margin: 0;
            }
        }
        .info{
            width: 470rpx;
        }
        .tit{
            height: 50rpx;
            line-height: 50rpx;
            font-size: 15px;
            color: #333;
            font-weight: bold;
        }
        .rates{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            text{
                color: #666;
            }
        }
        .des{
            display: flex;
            &-item{
                margin-right: 8px;
                .icon{
                    width: 14px;
                    height: 14px;
                    vertical-align: middle;
                }
                text{
                    vertical-align: middle;
                    font-size: 12px;
                    color: #666;
                }
            }
        }
        .labelbox{
            padding: 20rpx 0 0;
            font-size: 12px;
            .label-item{
                display: inline-block;
                margin-right: 4px;
            }
        }
    }
}
</style>
